<script setup lang="ts">
import {ref} from "vue";

const showCode = ref<boolean>(true)
</script>

<template>
  <div class="codeMa" v-if="showCode">
    <i class="close iconfont icon-guanbixiao" @click="showCode=false"></i>
    <div class="top">
      <i class="iconfont icon-weixin"></i>
      <span>微信扫一扫</span>
    </div>
    <div class="center">
      <img src="@/assets/images/code_home.png" alt="">
    </div>
    <div class="bottom">
      <span>预约挂号快速挂号</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.codeMa {
  position: relative;
  width: 150px;
  background-color: #ffffff;
  position: fixed;
  top: 40%;
  right: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  &:hover {
    .close {
      display: block;
    }
  }

  .top {
    display: flex;
    align-items: center;
    font-size: 12px;

    i {
      color: #41a83a;
    }

    span {
      margin-left: 5px;
    }
  }

  .center {
    margin: 5px 0;

    img {
      width: 100%;
    }
  }

  .bottom {
    font-size: 12px;
    color: #999999;
  }

  .close {
    position: absolute;
    left: -8px;
    top: -8px;
    display: none;
  }
}
</style>
